<template>
    <div class="schoolManagementListBox" style="min-height: 714px;">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane :label="item.name" :name="item.id+',1'" v-for="item in menuTabList" :key="item.id">
                <div class="resourcesWarp" v-if="item.name == '教研组资源' || item.name == '教研资源'">
                    <div class="title clearFix">
                        <label>{{item.name}}</label>
                        <el-button type="text" v-if="!isShow" @click="changeIsShow(true)">资源管理</el-button>
                        <el-button type="text" v-if="isShow" style="margin-right: 12px;" @click="changeIsShow(false)">退出管理
                        </el-button>
                        <!-- <div class="addBtn">
                            <el-button plain size="mini">审核</el-button>
                            <el-button plain size="mini" @click="isResources=true">新增资源</el-button>
                        </div> -->
                    </div>

                    <div class="resources">
                        <div class="resourcesList">
                            <resource-common :isSupervise="true" style="width: 100%" :isShow="isShow"></resource-common>
                        </div>
                    </div>
                </div>

                <el-tabs tab-position="left" v-else @tab-click="handleClickIn" v-model="activeNameIn">
                    <el-tab-pane :label="itemIn.name" :name="itemIn.id+','+itemIn.jumpType"
                        v-for="itemIn in item.children" :data='itemIn' :key="itemIn.id">
                        <div class="classArticle" v-if="itemIn.jumpType == 1">
                            <ArticleListCommon :articleSchoolList='articleSchoolList' @cShowPagin="cShowPagin"
                                :activeNameIn='activeNameIn' @articleSchool='articleSchool'></ArticleListCommon>
                        </div>
                        <div class="classAlbum" v-if="itemIn.jumpType == 2">
                            <PhotoCommon :photoalbumlist='photoalbumlist' :activeNameIn='activeNameIn'
                                @pagePhotoalbumlist='pagePhotoalbumlist'></PhotoCommon>
                        </div>
                        <div class="classAlbum" v-if="itemIn.jumpType == 3">
                            <ArticleListPicVdoCommon :articleSchoolList='articleSchoolList' @cShowPagin="cShowPagin"
                                :activeNameIn='activeNameIn' @articleSchool='articleSchool' :isListN='isListN'
                                :isResrarchGroup='isResrarchGroup' ref="meArticle" :isSlef='isManager ||(userInfo.id == otherUserInfo.id)'></ArticleListPicVdoCommon>
                        </div>
                        <div class="classAlbum" v-if="itemIn.jumpType == 4">
                            <el-table :data="memberList.list" style="width: 100%">
                                <!-- <el-table-column label="添加时间" prop="date">
                                </el-table-column> -->
                                <el-table-column label="姓名" prop="userName">
                                </el-table-column>
                                <el-table-column label="职责">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.isGroupLeader?'组长': '组员' }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column align="right">
                                    <template slot="header" slot-scope="scope">
                                        <el-button type="text" @click="addOrEditMember('open')">添加组员</el-button>
                                        <!-- <el-input v-model="search" size="mini" placeholder="输入关键字搜索" /> -->
                                    </template>
                                    <template slot-scope="scope">
                                        <el-button size="mini" @click="addOrEditMember(scope.row)">编辑
                                        </el-button>
                                        <el-button size="mini" type="danger"
                                            @click="memberDelete(scope.$index, scope.row)">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                        <div class="block" v-if="isShowPagin && itemIn.jumpType != 2">
                            <el-pagination background @size-change="handleSizeChange"
                                @current-change="handleCurrentChange" :current-page="currentPage"
                                :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
                                layout="total, sizes, prev, pager, next, jumper" :total="totals">
                            </el-pagination>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </el-tab-pane>
        </el-tabs>

        <!--修改/添加组员 -->
        <el-dialog title="组员管理" :visible.sync="groupMemberV" width="500px">
            <el-form ref="form" label-width="120px" :rules="rules">
                <el-form-item label="姓名:" prop="formTitle" v-if="memberEdit">
                    <el-input placeholder="请输入姓名" v-model="formTitle" :disabled="memberEdit"></el-input>
                </el-form-item>
                <el-form-item label="身份证:" prop="memberIdC" v-else>
                    <el-input placeholder="请输入身份证" v-model="memberIdC"></el-input>
                </el-form-item>
                <el-form-item label="是否任命为组长:">
                    <el-checkbox style="float:left" v-model="MemberChecked">是</el-checkbox>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" size="mini" @click="addOrEditMember('do')">确定</el-button>
                <el-button size="mini" @click="groupMemberV = false">取消</el-button>
            </span>
        </el-dialog>
        <!--修改/添加文章 -->
        <el-dialog title="修改文章" :visible.sync="isEdit" width="800px">
            <el-form ref="form" label-width="80px">
                <el-form-item label="标题">
                    <el-input placeholder="请输入标题" v-model="memberName"></el-input>
                </el-form-item>
                <el-form-item label="内容">
                    <WangEditor :catchData="catchData"></WangEditor>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" size="mini" @click="isEdit = false">完 成</el-button>
                <el-button type="primary" size="mini" @click="isEdit = false">保 存</el-button>
            </span>
        </el-dialog>

        <!--新增资源-->
        <el-dialog title="新增资源" :visible.sync="isResources" width="600px">
            <el-form ref="form" v-model="formResources" label-width="80px">
                <el-form-item label="资源文件">
                    <el-input placeholder="请输入标题" v-model="formResources.file"></el-input>
                </el-form-item>
                <el-form-item label="资源类型">
                    <el-select v-model="formResources.type" placeholder="请选择" style="width: 100%;">
                        <el-option label="试卷" value="shanghai"></el-option>
                        <el-option label="试题" value="beijing"></el-option>
                        <el-option label="教案" value="jaoan"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="资源名称">
                    <el-input v-model="formResources.name" placeholder="请输入标题"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" size="mini" @click="isResources = false">确 认</el-button>
            </span>
        </el-dialog>
        <!--新建相册-->
        <el-dialog title="新建相册" :visible.sync="addAlbum" width="660px" center>
            <el-form ref="addAlbumForm" :model="addAlbumForm" label-width="80px" :rules="rules">
                <el-form-item label="名称:">
                    <el-input type="text" placeholder="请输入内容" v-model="addAlbumForm.name" maxlength="30"
                        :show-word-limit="true" required></el-input>
                </el-form-item>
                <el-form-item label="描述:">
                    <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="addAlbumForm.describe"
                        maxlength="50" :show-word-limit="true" required></el-input>
                </el-form-item>
                <el-form-item label="设置封面:">
                    <el-upload class="avatar-uploader" :action="'' | baseUpPUrl"
                        accept=".jpg,.jpeg,.png,.JPG,.JPEG.PNG"
                        :show-file-list="false"  :on-change="handleChange">
                        <div slot="file" slot-scope="file">
                            <img v-if="file.url" class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </div>
                    </el-upload>
                    <el-upload ref="upload" :auto-upload="true" :limit='1' :on-change="handleChange"
                        accept=".jpg,.jpeg,.png,.JPG,.JPEG.PNG"
                        :action="'' | baseUpPUrl" class="avatar-uploader" :show-file-list="false">
                        <!-- <i slot="default" class="el-icon-plus"></i> -->
                        <div slot="file" slot-scope="file">
                            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                        </div>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="81%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </el-form-item>
                <el-form-item label="相册权限:">
                    <el-select v-model="addAlbumForm.jurisdictionid" placeholder="请选择权限" style="width: 30%;">
                        <el-option :label="item.name" :value="item.id" v-for="(item, index) in permissionArr.slice(0,2)"
                            :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <!-- <el-form-item label="其他权限">
                    <el-radio-group v-model="addAlbumForm.isReprint">
                        <el-radio label="1">允许转载</el-radio>
                        <el-radio label="2">只允许好友转载</el-radio>
                    </el-radio-group>
                </el-form-item> -->
                <el-form-item style="text-align: right;">
                    <el-button type="primary" size="small" @click="addAlbumSub('addAlbumForm')">确定
                    </el-button>
                    <el-button size="small" @click="addAlbum=false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!--上传照片-->
        <el-dialog title="上传照片" :visible.sync="uploadPhotos" width="690px" center>
            <div class="uploadPhotosBox">
                <div class="uploadTo">
                    <label>上传到：</label>
                    <el-select v-model="uploadTo" placeholder="请选择" size="mini">
                        <el-option :label="item.photoname" :value="item.id" v-for="(item, index) in photoalbumlist.list"
                            :key="index"></el-option>
                    </el-select>
                    <!-- <label class="sizeLeft">相册尺寸：</label>
                    <el-radio-group v-model="size">
                        <el-radio label="普通"></el-radio>
                        <el-radio label="高清"></el-radio>
                        <el-radio label="原图"></el-radio>
                    </el-radio-group> -->
                </div>
                <div class="uploadList">
                    <el-upload ref="upload" :auto-upload="true" :multiple='true' :limit='20' :on-change="handleChange"
                        accept=".jpg,.jpeg,.png,.JPG,.JPEG.PNG"
                        :action="'' | baseUpPUrl" list-type="picture-card">
                        <i slot="default" class="el-icon-plus"></i>
                        <div slot="file" slot-scope="{file}">
                            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                            <span class="el-upload-list__item-actions">
                                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                    <i class="el-icon-zoom-in"></i>
                                </span>
                                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                    <i class="el-icon-delete"></i>
                                </span>
                            </span>
                        </div>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="80%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </div>
                <div class="btn">
                    <el-button type="primary" size="mini" @click="submitUpload">开始上传</el-button>
                    <label>在上传过程中请不要删除原始照片</label>
                </div>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    import {
        mapState
    } from 'vuex'
    import ResourceCommon from '@/components/resource/resourceCommon'
    import ArticleListCommon from '@/components/article/ArticleListCommon'
    import ArticleListPicVdoCommon from '@/components/article/ArticleListPicVdoCommon'
    import PhotoCommon from '@/components/photoDetails/PhotoCommon'
    import WangEditor from '@c/wangeditor/wangeditor'
    export default {
        props: ['menuTabList', 'activeMenuIndex'],
        components: {
            WangEditor,
            PhotoCommon,
            ArticleListCommon,
            ResourceCommon,
            ArticleListPicVdoCommon
        },
        computed: {
            ...mapState({
                // 权限列表
                permissionArr: state => state.commonModule.permissionArr,
                isManager: state => state.commonModule.isManager,
                // 用户详细信息
                userInfo: state => state.userModule.userInfo,
                otherUserInfo: state => state.userModule.otherUserInfo,
                group: state => state.researchModule.group
            })
        },
        watch: {
            // activeName(val){
            //     console.log(val)
            // },
            activeNameIn(val) {
                if (val == '102,4') {
                    this.getMember()
                }
            }
        },
        created() {
            // console.log(this.userInfo,this.otherUserInfo,this.isManager)
            if(this.activeMenuIndex == 'group'){
                this.activeName = '102,1'
                this.activeNameIn = '102,4'
            }
        },
        beforeMount() {
            this.articleSchool('31')
        },
        data() {
            return {
                albumSort: 1,
                isListN: true,
                memberEdit: false,
                memberList: {},
                memberCache: {},
                memberName: '',
                memberIdC: '',
                MemberChecked: false,
                groupMemberV: false,
                isResrarchGroup: false,
                isShowPagin: true,
                disabled: false,
                addAlbumForm: {
                    imgUrl: '',
                    name: "",
                    describe: "",
                    jurisdictionid: 5,
                    isReprint: '1'
                },
                rules: {
                    name: [{
                        required: true,
                        message: '请输入...'
                    }, ],
                    describe: [{
                        required: true,
                        message: '请输入...'
                    }, ],
                },
                size: '高清',
                photoalbumlist: {},
                articleSchoolList: {},
                pictureSchoolList: {},
                activeName: '91,1',
                activeNameIn: '91,3',
                currentPage: 1,
                pageSize: 10,
                formTitle: '',
                totals: 0,
                formResources: {
                    file: '',
                    type: '',
                    name: ''
                },
                albumName: "",
                addAlbum: false,
                isAllChen: false,
                isAlbumEdit: false,
                isShow: false,
                isResources: false,
                isEdit: false,
                imgUrl: [{
                    id: 1,
                    src: require('../../assets/img/headportrait01.jpg'),
                }, {
                    id: 2,
                    src: require('../../assets/img/headportrait03.jpg')
                }, {
                    id: 3,
                    src: require('../../assets/img/album03.jpg')
                }],
                editorContent: "",
                uploadPhotos: false,
                dialogVisible: false,
                uploadTo: '',
                dialogImageUrl: ''
            }
        },

        methods: {
            changeIsShow(params) {
                this.isShow = params
            },
            addOrEditMember(params) {
                if (params == 'open') {
                    this.memberEdit = false
                    this.groupMemberV = true
                } else if (params == 'do') {
                    if (this.memberIdC == '' && !this.memberEdit) {
                        this.$message.warning('请先输入正确的身份证号码！')
                    } else {
                        this.$store.dispatch(this.memberEdit ? 'researchModule/groupUserUpdate' :
                            'researchModule/groupUserCreate', {
                                isGroupLeader: this.MemberChecked,
                                groupId: this.group.id,
                                idNumber: this.memberIdC,
                                id: this.memberCache.id || null,
                            }).then(res => {
                            if (res) {
                                this.groupMemberV = false
                                this.getMember()
                                this.$message.success('操作成功')
                            }
                        })
                    }
                } else {
                    this.memberEdit = true
                    this.groupMemberV = true
                    this.formTitle = params.userName
                    this.MemberChecked = params.isGroupLeader
                    this.memberCache = params
                }
            },
            getMember() {
                this.$store.dispatch('researchModule/groupUserPage', {
                    id: this.group.id || null,
                    limit: this.pageSize,
                    page: this.currentPage,
                }).then(res => {
                    if (res) {
                        this.memberList = res
                        this.totals = this.memberList.total
                    }
                })
            },
            handleEdit(index, row) {
            },
            memberDelete(index, row) {
                this.$store.dispatch('researchModule/groupUserDel', {
                    ids: row.id || null,
                }).then(res => {
                    if (res) {
                        this.getMember()
                        this.$message.success("删除成功")
                    }
                })
            },
            // 是否显示分页插件
            cShowPagin(param) {
                this.isShowPagin = param;
            },
            // 新增相册
            addAlbumSub(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$store.dispatch('photoalbumModule/albumCreateSchool', {
                            groupId: this.group.id,
                            cover: this.fileList[0].response.result.originalUrl,
                            dictype: this.activeNameIn.split(',')[0],
                            discribe: this.addAlbumForm.describe,
                            friendreprint: this.addAlbumForm.isReprint == '1' ? true : false,
                            jurisdictionid: this.addAlbumForm.jurisdictionid,
                            photoname: this.addAlbumForm.name,
                            photoorigin: 1,
                            reprint: this.addAlbumForm.isReprint == '1' ? true : false,
                            userid: this.otherUserInfo.xxdm,
                        }).then(res => {
                            if (res.data.code === 200) {
                                this.$message.success(res.data.msg)
                                this.addAlbum = false
                                this.pagePhotoalbumlist()
                            }
                        })
                    } else {
                        return false;
                    }
                });
            },
            // 上传图片到相册
            submitUpload() {
                if (this.uploadTo) {
                    var urls = []
                    if (this.fileList.length > 0) {
                        this.fileList.map(item => {
                            if (item.response.code == 200) {
                                urls.push(item.response.result.originalUrl)
                            }
                        })
                        this.$store.dispatch('photoalbumModule/photoUpImgs', {
                            urls: urls,
                            photoid: this.uploadTo
                        }).then(res => {
                            if (res.data.code === 200) {
                                this.fileList = []
                                this.$message.success('上传图片成功')
                                this.uploadPhotos = false
                                this.$refs.upload.clearFiles();
                                this.pagePhotoalbumlist()
                            }
                        })
                    } else {
                        this.$message.warning('请先选择图片')
                        return
                    }
                } else {
                    this.$message.warning('请选择上传到的相册')
                    return
                }

            },
            // 我的相册列表
            pagePhotoalbumlist(params) {
                this.$store.dispatch('photoalbumModule/albumPageSchool', {
                    groupId: this.activeName == '91,1'? null : this.group.id,
                    sort: params || this.albumSort ,
                    dictype: this.activeNameIn.split(',')[0],
                    userid: this.otherUserInfo.xxdm,
                    isMyself: this.isManager?1:null,
                    search: null,
                    page: 1000,
                    limit: 11,
                }).then(res => {
                    if (res.data.code === 200) {
                        this.photoalbumlist = res.data.result
                    }
                }).catch(err => {
                })
            },
            articleSchool(params,params1) {
                if(params == 95){
                    // this.$refs.resourceRef.resourcePage()
                }else if (this.activeNameIn.split(',')[0] == '91') {
                    this.$store.dispatch('researchModule/groupPage', {
                        organizationId: this.otherUserInfo.xxdm,
                        limit: this.pageSize,
                        page: this.currentPage,
                    }).then(res => {
                        if (res) {
                            this.totals = res.total
                            this.articleSchoolList = res
                        }
                    })
                } else if (this.activeNameIn.split(',')[0] == '93' || this.activeNameIn.split(',')[0] == '97') {
                    this.$store.dispatch('researchModule/activityPage', {
                        dictype: 0,
                        groupId: this.group.id,
                        organizationId: this.otherUserInfo.xxdm,
                        limit: this.pageSize,
                        page: this.currentPage,
                        state: 0,
                        sort: (params && params1)?params : 0,
                    }).then(res => {
                        if (res) {
                            this.totals = res.total
                            this.articleSchoolList = res
                        }
                    })
                } else {
                    this.$store.dispatch('articleModule/schoolArticleList', {
                        schoolid: this.otherUserInfo.xxdm,
                        // classifyid: this.group.id,
                        groupId: this.activeNameIn.split(',')[0] == '94'?null : this.group.id,
                        dictype: this.activeNameIn.split(',')[0],
                        draft: 1,
                        limit: this.pageSize,
                        isMyself: this.isManager?1:null,
                        page: this.currentPage,
                        search: null,
                        sortType: (params && params1)?params : 0,
                        userid: null,
                        yearandmonth: null
                    }).then(res => {
                        if (res.data.code == 200) {
                            this.totals = res.data.result.total
                            this.articleSchoolList = res.data.result
                            return res.data.result
                        } else {
                            return null
                        }
                    })
                }
            },
            handleClick(tab, event) {
                this.activeNameIn = tab.name
                if (tab.name) {
                    if (tab.name.split(',')[1] == 1) {
                        this.articleSchool(tab.name.split(',')[0])

                    } else if (tab.name.split(',')[1] == 2) {
                        this.pagePhotoalbumlist()
                    }
                }
            },
            handleChange(file, fileList) {
                this.fileList = fileList
            },
            handleClickIn(tab, event) {
                this.activeNameIn = tab.name
                this.$refs.meArticle[0].articTab('list')
                this.isListN = null
                this.$store.commit('commonModule/CHANGETOLIST')
                if (tab.name == '93,3' || tab.name == '97,3') {
                    this.isResrarchGroup = true
                } else {
                    this.isResrarchGroup = false
                }
                if (tab.name) {
                    if (tab.name.split(',')[1] == 1 || tab.name.split(',')[1] == 3 || tab.name.split(',')[1] == 4) {
                        this.articleSchool(tab.name.split(',')[0])
                        this.isShowPagin = true
                    } else if (tab.name.split(',')[1] == 2) {
                        this.isShowPagin = false
                        this.pagePhotoalbumlist()
                        // this.pagePhotoalbumlist(tab.name.split(',')[0])
                    }
                }
            },
            handleSizeChange(val) {
                this.pageSize = val
                if (this.activeNameIn == '102,4') {
                    this.getMember()
                } else {
                    this.articleSchool()
                }
            },
            handleCurrentChange(val) {
                this.currentPage = val
                if (this.activeNameIn == '102,4') {
                    this.getMember()
                } else {
                    this.articleSchool()
                }
            },

            handleRemove(file, fileList) {
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            // 富文本
            catchData(edit) {
                this.editorContent = edit
            }
        }
    }
</script>

<style lang="scss" scoped>
    .el-icon-plus {
        border:azure;
        text-align: center;
        font-size: 60px;
        height: 100px;
        width: 120px;
    }
    .schoolManagementListBox {
        width: 81%;
        margin: 0 auto;
        background-color: white;
        box-sizing: border-box;
        padding: 0 15px;
        margin-top: 20px;

        .title {
            text-align: left;
            border-bottom: 1px solid #ccc;
            margin-bottom: 10px;

            label {
                color: #303133;
                margin-right: 15px;
                font-size: 14px;
            }

            .addBtn {
                float: right;
            }
        }

        .classArticle {

            margin-left: 10px;

            .warpBox {
                .warp {
                    margin-bottom: 12px;

                    .articleTitle {
                        font-size: 14px;
                        color: #303133;
                        float: left;
                    }

                    .timeBtn {
                        font-size: 12px;
                        color: #909399;
                        float: right;

                        label {
                            margin-right: 12px;
                        }
                    }
                }
            }

        }

        .classAlbum {
            .albumWarp {
                margin-top: 10px;

                .albumList {
                    width: 192px;
                    height: 190px;
                    position: relative;
                    overflow: hidden;
                    margin-right: 10px;
                    margin-bottom: 10px;

                    .imgBox {
                        width: 192px;
                        height: 192px;
                        position: relative;
                        overflow: hidden;

                        .btnZu {
                            width: 100%;
                            position: absolute;
                            left: 0;
                            bottom: 0;
                            background-color: rgba(255, 255, 255, .6);
                            box-sizing: border-box;
                            padding: 5px;
                            text-align: left;
                            display: none;

                            .delete {
                                float: right;
                            }

                        }
                    }

                    label {
                        font-size: 14px;
                        margin-top: 5px;
                        display: block;
                    }

                }

                .albumList:hover .btnZu {
                    display: block;
                }
            }

            .coverWarp {
                .cover {
                    float: left;

                    .coverImg {
                        float: left;
                        width: 150px;
                        height: 150px;
                        overflow: hidden;
                        border-radius: 10px;
                    }

                    .coverName {
                        float: left;
                        margin-left: 10px;

                        label {
                            display: block;
                            font-weight: bold;
                            font-size: 18px;
                            margin-bottom: 20px;
                            margin-top: 35px;
                        }
                    }
                }

                .addBtn {
                    float: right;
                    margin-top: 78px;
                }
            }
        }

        .resourcesWarp {
            box-sizing: border-box;
            padding: 0 20px;

            .resources {
                margin-top: 10px;

                .resourcesList {
                    margin-bottom: 10px;
                    text-align: center;
                    position: relative;
                    padding-bottom: 10px;
                    border-bottom: 1px solid #ccc;

                    .checked {
                        position: absolute;
                        top: 20px;
                        left: 0;
                    }

                    .typeName {
                        font-size: 16px;
                        margin-left: 30px;
                        color: #303133;

                        span {
                            display: inline-block;
                            box-sizing: border-box;
                            padding: 2px 4px;
                            border: 1px solid #99CCFF;
                            border-radius: 4px;
                            margin-right: 10px;
                        }
                    }

                    .tiemWarp {
                        font-size: 14px;
                        margin-left: 30px;
                        color: #303133;
                        margin-top: 6px;

                        label {
                            margin-right: 50px;

                            span {
                                margin-left: 10px;
                            }
                        }
                    }

                    .download {
                        position: absolute;
                        right: 0;
                        top: 15px;
                    }
                }
            }
        }

        .block {
            margin: 20px 0;
        }

        ul {
            list-style-type: none;
            margin-block-start: 0;
            margin-block-end: 0;
            padding-inline-start: 0;
        }

        .clearFix::after {
            content: "";
            display: block;
            width: 100%;
            font-size: 0;
            clear: both;
        }
    }

    .uploadPhotosBox {
        .uploadTo {
            .sizeLeft {
                margin-left: 22px;
            }
        }

        .uploadList {
            margin: 15px 0;
            box-sizing: border-box;
            padding: 5px;
            background-color: #f5f7fa;
        }

        .btn {
            label {
                margin-left: 15px;
            }
        }
    }
</style>